<script setup>
import {defineProps, defineEmits, ref} from 'vue';
import BookDetail from "@/components/BookDetail.vue";

// 组件参数：接收来自父组件的数据
const props = defineProps({
  bookList: {
    type: Array,
    required: true,
  }, // 要显示的书籍列表
  currentPage: {
    type: Number,
    required: true,
  }, // 第几页
  pageSize: {
    type: Number,
    required: true,
  }, // 每页显示几条
  totalItems: {
    type: Number,
    required: true,
  } // 总记录数
});

// 处理翻页，参数就是当前页码
const emit = defineEmits();
const handleCurrentChange = (pageNum) => {
  emit('change-page', pageNum);
};
//#region ---------------弹窗组件内容开始--------------------
const dialogVisible = ref(false)
const bookId = ref(null)
/*点击弹出图书详情*/
const showDetail = (bId) =>{
  dialogVisible.value = true
  bookId.value = bId
}
//子组件回调父组件的方法
const handleClose = (visible) => {
  dialogVisible.value = visible
}
//#endregion ---------------弹窗组件内容结束--------------------

</script>

<template>
  <!-- gutter：设置每个列之间间隔 -->
  <el-row :gutter="20">
    <!-- 每行显示6个 -->
    <el-col :span="4" v-for="book in bookList" :key="book.id" style="margin-bottom: 25px;" @click="showDetail(book.id)">
      <!-- 鼠标移上才显示阴影 -->
      <el-card :body-style="{ padding: '8px' }" shadow="hover">
        <el-image style="width: 100%; height: 200px;"
                  :src="$urlImage + book.imgSrc" fit="fill"/>
        <!-- 显示书籍信息-->
        <div class="book-info">
          <el-popover trigger="hover">
            <template #reference>
              <div style="margin-bottom: 5px; font-weight: bold;">
                书名：{{ book.name }}</div>
            </template>
            <div v-html="book.name"></div>
          </el-popover>

          <div style="margin-bottom: 5px; color: #666;">价格：&yen;{{ book.price }}</div>

          <el-popover trigger="hover">
            <template #reference>
              <div style="color: #666;">作者：{{ book.author }}</div>
            </template>
            <div v-html="book.author"></div>
          </el-popover>
          <div>销量：{{ book.buyCount }}</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
<!-- 分页组件 -->
  <el-row>
    <el-col :span="24" style="text-align: center">
      <!-- 分页组件 -->
      <el-pagination background layout="prev, pager, next, jumper"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="totalItems"
                     @current-change="handleCurrentChange"/>
    </el-col>
  </el-row>

<!-- 引用的图书详情弹窗组件 -- 相对于BookList组件而言。BookDetail就是子组件
     父组件这里要传给子组件的属性有dialogVisible和bookId；在父组件打开弹窗，就要在父组件关闭弹窗
     因此子组件要传值回来
-->
  <BookDetail :dialogVisible="dialogVisible" :bookId="bookId" @close="handleClose"></BookDetail>
</template>

<style scoped>
/* 主容器的背景和内边距 */
div {
  background-color: #f9f9f9; /* 浅灰色背景 */
  padding: 5px;
}

/* 书籍信息区域 */
.book-info {
  padding: 5px; /* 调整内边距 */
  font-size: 14px; /* 字体大小 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px; /* 最大宽度 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 每本书卡片 */
.el-card {
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时添加阴影 */
.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 更显著的阴影效果 */
}

/* 书名、价格、作者、销量样式 */
.book-info div {
  margin: 3px 0; /* 上下间距减小 */
  color: #333; /* 深色文字 */
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px; /* 顶部间距 */
}

/* 分页按钮的自定义样式 */
.el-pagination .el-button {
  background-color: #409EFF; /* 主色调 */
  color: white; /* 文字颜色 */
}

/* 分页按钮悬停效果 */
.el-pagination .el-button:hover {
  background-color: #66b1ff; /* 悬停时颜色变化 */
  color: white;
}

/* 图片样式 */
.el-image {
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 防止超出 */
}

</style>